@charset "UTF-8";
@import "common.scss";
/**
 * ==================================================
 * HTML Element Reset
 * ==================================================
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, q, s, samp,
small, strike, strong, sub, sup, tt, var, font,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background-color: transparent;
  @include boxSizing(border-box);
}

ol, ul {
  list-style-type: none;
}
a {
  color: $fDefault;
  text-decoration: none;
  outline: none;
  &:focus, &:hover{
    text-decoration: none;
  }
}
input{
  background: transparent;
  border: none;
  width: 100%;
  @include borderRaduis(0);
}
:focus {
  outline: 0;
}

html {
  font-size: 62.5%;          //1rem = 10px;
  -webkit-text-size-adjust: 100%;
}

body {
  color: $fDefault;
  font-size: $fXS;
  font-family: $globalFont;
}
img {
  border: none;
  outline: none;
  -webkit-touch-callout: none;
  // width: 100%;
}
img.fullimg{
  width: 100%;
}
/**
 * ==================================================
 * Bootstrap Extends
 * ==================================================
 */

/* design common background style 设计通用背景*/
.m-head-title-bg{
  position: relative;
  background-color: #141414;
}
.bg-color-white{
  background-color: $bgWhite;
}
.bg-color-black{
  background-color: $bgDefault;
}
.bg-color-grey{
  background-color: $bgGrey;
}
.bg-color-pure-grey{
  background-color: $bgPureGrey ;
}
/* Display Styles */
.show-block {
  display: block;
}
.show-inline {
  display: inline;
}
.show-inline-block {
  display: inline-block;
}

/* position style */
.position-relative{
  position: relative;
}
.position-absolute{
  position: absolute;
}
.position-fixed{
  position: fixed;
}

/* Text Size */
.text-xs {
  font-size: $fXS;
}
.text-sm {
  font-size: $fSM;
}
.text-md {
  font-size: $fMD;
}
.text-lg {
  font-size: $fLG;
}
.text-xl {
  font-size: $fXL;
}
.text-center{
  text-align: center;
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}
.f14{
  font-size: torem(14px*2);
}
.f16{
  font-size: torem(16px*2);
}
.f18{
  font-size: torem(18px*2);
}
.f20{
  font-size: torem(20px*2);
}
.f24{
  font-size: torem(24px*2);
}
.f28{
  font-size: torem(28px*2);
}
.f32{
  font-size: torem(32px*2);
}
.f48{
  font-size: torem(48px*2);
}

/* Text Styles */
.text-bold {
  font-weight: bold;
  font-family: $globalBoldFont;
}
.text-normal {
  font-weight: normal;
}
.text-italic {
  font-style: italic;
}
.text-underline {
  text-decoration: underline;
}
.text-overline {
  text-decoration: overline;
}
/*Text Color*/
.color-primary{
  color:$bgPrimary;
}
/* Text Align */
.text-break {
  word-break: break-all;
  word-wrap: break-word;
}
.text-truncate {
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Text Vertical Align */
.text-v-top {
  vertical-align: top;
}
.text-v-middle {
  vertical-align: middle;
}
.text-v-bottom {
  vertical-align: bottom;
}

/* Radius Styles */
.radius-no{
  border-radius: 0!important ;
}
.radius {
  border-radius: 8px;
}



/* Margin Styles */
.margin {
  margin: $spacing;
}
.margin-top {
  margin-top: $spacing;
}
.margin-bottom {
  margin-bottom: $spacing;
}
.margin-h {
  margin: 0 $spacing;
}
.margin-v {
  margin: $spacing 0;
}

.margin-sm {
  margin: $spacingSM;
}
.margin-top-sm {
  margin-top: $spacingSM;
}
.margin-bottom-sm {
  margin-bottom: $spacingSM;
}
.margin-h-sm {
  margin: 0 $spacingSM;
}
.margin-v-sm {
  margin: $spacingSM 0;
}

.margin-lg {
  margin: $spacingLG;
}
.margin-h-lg {
  margin: 0 $spacingLG;
}
.margin-v-lg {
  margin: $spacingLG 0;
}
.margin-top-lg {
  margin-top: $spacingLG;
}
.margin-bottom-lg {
  margin-bottom: $spacingLG;
}
.margin-no{
  margin: 0!important;
}
.margin-top-no{
  margin-top: 0 !important;
}
.margin-bottom-no{
  margin-bottom: 0 !important;
}

/* Padding Styles */
.padding {
  padding: $spacing;
}
.padding-top {
  padding-top: $spacing;
}
.padding-bottom {
  padding-bottom: $spacing;
}
.padding-h {
  padding: 0 $spacing;
}
.padding-v {
  padding: $spacing 0;
}

.padding-sm {
  padding: $spacingSM;
}
.padding-top-sm {
  padding-top: $spacingSM;
}
.padding-bottom-sm {
  padding-bottom: $spacingSM;
}
.padding-h-sm {
  padding: 0 $spacingSM;
}
.padding-v-sm {
  padding: $spacingSM 0;
}

.padding-lg {
  padding: $spacingLG;
}
.padding-h-lg {
  padding: 0 $spacingLG;
}
.padding-v-lg {
  padding: $spacingLG 0;
}
.padding-top-lg {
  padding-top: $spacingLG;
}
.padding-bottom-lg {
  padding-bottom: $spacingLG;
}
.padding-no{
  padding: 0!important;
}
.padding-top-no{
  padding-top: 0 !important;
}
.padding-bottom-no{
  padding-bottom: 0 !important;
}
.padding-h-no{
  padding-left: 0;
  padding-right:0;
}

/* Transition Styles */
.ease {
  @include transition(all .4s ease);
}
.ease-in {
  @include transition(all 4s ease-in);
}

//兼容ios
.input-ios{
  padding-bottom:0;
  padding-top:0;
  border-radius:0;
}


// flex layout

 .flex-center-v,
 .flex-center-h,
 .flex-center ,
 .flex-h-space-between{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

//垂直对齐
.flex-center-v,
.flex-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}

//水平居中
.flex-center-h,
.flex-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
// 两端对齐
.flex-h-space-between{
  -webkit-box-pack: space-between;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.flex-row{
  flex-direction:row;
}
//flex-1 to flex-12
@for $i from 1 through 12{.flex-#{$i}{flex:$i;}}
.flex-box{
  display: flex;
}
.align-self-center{
  align-self:center;
}
// modal styles
.modal-dialog{
  width: 94%;
  margin: 6rem auto;
  .modal-title{
    text-align: center;
  }
  .modal-header,.modal-footer{
    border: none;
  }
}
.modal-content{
    color: white;
    border-radius: 0.3rem;
    overflow: hidden;
    // background: url(../images/common/item_on_bg.png) no-repeat;
    // background-size: cover;
    opacity: 0.95;
    .modal-header{
      border-bottom: 1px solid #100f0f;
    }
    .modal-footer{
      border-top: 1px solid #100f0f;
    }
}
//vertical-middle center
.v-center-box:after {
  content: ' ';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.v-center-box > * {
  vertical-align: middle;
  display: inline-block;
}


//ui-native-scroll
//tom add
//staging version
.scroll-y,.scroll-y{
  -webkit-overflow-scrolling:touch;
}
.scroll-y{
  overflow-y: scroll;
}
.scroll-x{
  overflow-x: scroll;
}
.hidden-y{
  overflow-y: hidden;
}
.hidden-x{
  overflow-x: hidden;
}
//行内超出之后省略
.ellipsis{
  display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

//visibility
.visibility-hiden{
  visibility:hidden;
}

//table-cell
.cell{
  display: table-cell;
  vertical-align: middle;
}
//width
.width100{
  width: 100%;
}

//color
.active-color{
  color: rgb( 1, 171, 238 );
}
